<template>
    <div class="goods-container">
        <div class="goods-item">
            <img src="https://img12.360buyimg.com/n7/jfs/t1/99351/22/18386/350613/5e93e244E630e3dc5/1258fb907515b13c.jpg" alt="">
            <h4>Apple iPhone XS Max (A2104) 256GB 金色</h4>
            <div class="goods-details">
                <p>
                    <span class="newp">¥8999</span>
                    <span class="oldp">9999</span>
                </p>
                <p class="goods-cell">
                    <span>热卖中</span>
                    <span>剩60件</span>
                </p>
            </div>
        </div>
        <div class="goods-item">
            <img src="https://img12.360buyimg.com/n7/jfs/t1/99351/22/18386/350613/5e93e244E630e3dc5/1258fb907515b13c.jpg" alt="">
            <h4>Apple iPhone XS Max (A2104) 256GB 金色 移动联通电信4G手机 双卡双待</h4>
            <div class="goods-details">
                <p>
                    <span class="newp">¥8999</span>
                    <span class="oldp">9999</span>
                </p>
                <p class="goods-cell">
                    <span>热卖中</span>
                    <span>剩60件</span>
                </p>
            </div>
        </div>
        <div class="goods-item">
            <img src="https://img12.360buyimg.com/n7/jfs/t1/99351/22/18386/350613/5e93e244E630e3dc5/1258fb907515b13c.jpg" alt="">
            <h4>Apple iPhone XS Max (A2104) 256GB 金色 移动联通电信4G手机 双卡双待</h4>
            <div class="goods-details">
                <p>
                    <span class="newp">¥8999</span>
                    <span class="oldp">9999</span>
                </p>
                <p class="goods-cell">
                    <span>热卖中</span>
                    <span>剩60件</span>
                </p>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.goods-container{
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;
    .goods-item{
        width: 49%;
        min-height: 305px;
        box-shadow: 0 0 3px #999;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 7px;
        h4{
            font-size: 14px;
        }
        img{
            width: 100%;
        }
        .goods-details{
            background-color: #eee;
            padding: 7px;
            .newp{
                color: red;
                font-size: 16px;
            }
            .oldp{
                color: 12px;
                text-decoration: line-through;
                margin-left: 10px;
            }
            .goods-cell{
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>